<!-- <template>
  <div class="common-layout">
    <el-container>
      <el-aside style="margin-left: 50px;margin-top: 50px; width: 25%;margin-right: 5%;" >
        <sql-presets v-show="change"></sql-presets>
        <sql-helper v-show="!change"></sql-helper>
      </el-aside>
      <el-main style="width: 65%;margin-top: 50px;margin-right: 5%;background-color: pink;">
        <div style="width: 100%;height: 80%;background-color: #FFFFFF; margin-bottom: 5%;">

        </div>
        <div style="display: flex;justify-content: space-between;" >
            <el-button type="danger" @click="change=!change">编辑sql代码</el-button>
            <el-button type="primary">查看表结构</el-button>
            <el-button type="primary">生成crud代码</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup name="Home">
import { ref } from 'vue'
import SqlHelper from '../view/SqlHelper.vue'
import SqlPresets from '../view/SqlPresets.vue'

const change=ref(true)
</script>

<style scoped>
   
</style> -->



<template>
  <div class="Container">
      <el-transfer :titles="['待选属性', '已选属性']" filterable filter-placeholder=" " v-model="value" :data="data" @right-check-change="test">
        <template #left-footer>
          <el-button  type="primary" size="small"   @click="dialogFormVisible = true">添加属性</el-button>
       </template>
       <template #right-footer>
         <el-button type="primary" :loading="flag"  @click="GetSql">下一步</el-button>
      </template>
      </el-transfer>
     


  <el-dialog v-model="dialogFormVisible" title="添加属性值" width="500">
    <el-form :model="form">
      <el-form-item label="属性值" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" placeholder="输入格式:中文含义-英文
        "/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="Add">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  </div>
 
</template>

<script  setup>
import { reactive, ref, onMounted} from 'vue';
import { useRouter } from 'vue-router';
import {mainStore} from '../store/index'
const store=mainStore();
var fields=store.fields
const router = useRouter();
const flag=ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const data = reactive([])
const value = ref([])
// const { query } = router.currentRoute.value;
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// const fields = query.fields ? JSON.parse(query.fields) : [];
const GetSql=()=>{
  
}
onMounted(()=>{
  fields.forEach((line,index)=> {
      data.push({
        key: index,
        label:line.value+"-"+line.key
      });
});
})
const Add=function(){
  data.push({
    key:6666,
    label:"扣扣"
  })
  dialogFormVisible.value = false
}
function test(){
  console.log("哈哈哈")
}


</script>
<style scoped>
.Container{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-button .custom-loading .circular {
margin-right: 6px;
width: 18px;
height: 18px;
animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: var(--el-button-text-color);
stroke-linecap: round;
}
</style>